<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 代码一样，但是访问被阻止了 -->
    <div>
        <h2>发送ajax请求</h2>
        <button id="btn">发送</button>
    </div>
    <script>
        const btn=document.querySelector('#btn');
        btn.addEventListener('click',function(){
            //可以将return new Promise包括之后的代码封装到函数中，参数为URL
            const p=new Promise((resolve,reject)=>{
                const xhr=new XMLHttpRequest();//创建对象
                xhr.responseType='json';//改变格式
                xhr.open('GET','https://api.apiopen.top/getJoke');//初始化
                xhr.send();//发送
                xhr.onreadystatechange=function(){//处理响应结果
                    if(xhr.readyState === 4){
                        if(xhr.status>=200 && xhr.status<=300){//响应状态码为2xx成功
                            resolve(xhr.response);//输出响应体
                        }else{  
                            reject(xhr.status);//输出响应状态码
                        }
                    }

                }
            });
            p.then((value)=>{
                console.log(value);
            },(reason)=>{
                console.warn(reason);
            })
        })
    </script>
</body>
</html>